<template>
	<canvas canvas-id="canvas"></canvas>
</template>

<script>
	import {
		mapState
	} from "vuex"
	const jpeg = require("jpeg-js")
	// #ifdef MP-WEIXIN
	const fs = wx.getFileSystemManager()
	// #endif
	export default {
		name: "share-expert-poster",
		data() {
			return {
				drawing: false
			};
		},
		props: {
			templateUrl: {
				type: String,
				default: ''
			},
			qrcodeUrl: {
				type: String,
				default: ''
			}
		},
		computed: {
			...mapState(["userInfo"])
		},
		methods: {
			async draw() {
				console.log('绘制中');
				// #ifdef MP-WEIXIN
				if (this.drawing) {
					return
				}
				try {
					var [err, posterImg] = await uni.getImageInfo({
						src: this.templateUrl
					})
					if (err) {
						this.drawing = false
						throw err
					}
					// console.log('posterImg', posterImg)

					let avatarUrl = this.userInfo.avatar || 'https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_wode_shiming.png'
					var [err, avatarImg] = await uni.getImageInfo({
						src: avatarUrl
					})
					if (err) {
						this.drawing = false
						throw err
					}
					// console.log('avatarImg', avatarImg)

					var [err, qrcodeImg] = await uni.getImageInfo({
						src: this.qrcodeUrl
					})
					if (err) {
						this.drawing = false
						throw err
					}
					// console.log('qrcodeImg', qrcodeImg)

					const ctx = uni.createCanvasContext("canvas", this)
					ctx.clearRect(0, 0, 1080, 1620)
					ctx.drawImage(posterImg.path, 0, 0, posterImg.width, posterImg.height)

					const text1 = `ID: ${this.userInfo.id}`
					ctx.font = '30px Microsoft YaHei'
					const textM1 = ctx.measureText(text1)

					const text2 = `邀请你注册分享达人`
					ctx.font = '30px Microsoft YaHei'
					const textM2 = ctx.measureText(text2)

					const rectW = 50 + 8 + textM1.width + 10 + textM2.width
					const rectX = (posterImg.width - rectW) / 2
					ctx.fillStyle = '#df0000'
					ctx.fillRect(rectX, 522, rectW, 60)
					ctx.beginPath()
					ctx.arc(rectX, 552, 30, Math.PI / 2, Math.PI / 180 * 270)
					ctx.fill()
					ctx.beginPath()
					ctx.arc(rectX + rectW, 552, 30, Math.PI / 180 * 270, Math.PI / 2)
					ctx.fill()

					ctx.font = '30px Microsoft YaHei'
					ctx.fillStyle = '#feb80a'
					ctx.textBaseline = 'middle'
					// console.log('textM1', textM1)
					ctx.fillText(text1, rectX + 50 + 8, 522 + 30)

					ctx.fillStyle = '#ffffff'
					ctx.font = '30px Microsoft YaHei'
					ctx.textBaseline = 'middle'
					// console.log('textM2', textM2)
					ctx.fillText(text2, rectX + 50 + 8 + textM1.width + 10, 522 + 30)

					ctx.drawImage(qrcodeImg.path, 321, 608, 438, 438)
					
					
					
					let text3 = `扫描二维码即刻成为“`
					let text4 = `第三空间・${ uni.getStorageSync('currentRegion').name }站`
					let text5 = `”分享达人`
					let textM3 = ctx.measureText(text3)
					let textM4 = ctx.measureText(text4)
					let textM5 = ctx.measureText(text5)
					let textWidth = textM3.width + textM4.width + textM5.width
					let startPosition = (posterImg.width - textWidth) / 2
					
					ctx.setFontSize(30)
					ctx.setTextBaseline('middle')
					ctx.setFillStyle('white')
					ctx.fillText(text3, startPosition, 1100)
					ctx.setFillStyle('yellow')
					ctx.fillText(text4, startPosition + textM3.width, 1100)
					ctx.setFillStyle('white')
					ctx.fillText(text5, startPosition + textM3.width + textM4.width, 1100)



					ctx.beginPath();
					ctx.arc(rectX + 25, 552, 25, 0, Math.PI * 2);
					ctx.clip();
					ctx.drawImage(avatarImg.path, rectX, 527, 50, 50)

					ctx.draw(true, async () => {
						uni.canvasToTempFilePath({
							canvasId: "canvas",
							quality: 1,
							fileType: 'jpg',
							success: (res) => {
								console.log('画布保存路径', res);
								this.$emit('completed', res.tempFilePath)
								this.drawing = false
							},
							fail: () => {
								this.drawing = false
							}
						}, this);
					})
				} catch (e) {
					console.error(e)
					this.$showError(e)
					this.drawing = false
				}
				// #endif
			},
			async saveImage() {
				uni.showLoading({
					mask: true
				})
				try {
					await new Promise((resolve, reject) => {
						uni.getSetting({
							success: (res) => {
								let t = res.authSetting["scope.writePhotosAlbum"];
								if (t !== undefined && !t) {
									// 请求过权限，但是用户关闭了
									uni.showModal({
										title: "请先打开相册开关",
										cancelText: "取消",
										confirmText: "去打开",
										success: (res) => {
											if (res.confirm) {
												uni.openSetting();
											}
										}
									})
									rejcet();
								} else {
									resolve();
								}
							}
						})
					})
				} catch (e) {
					uni.hideLoading()
					return;
				}
				var that = this
				uni.canvasToTempFilePath({
					canvasId: this.poster._id,
					quality: 1,
					success: (res) => {
						console.log('保存到相册', res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
								uni.hideLoading()
							}
						})
					},
					fail: () => {
						uni.hideLoading()
					}
				}, this);
			}
		},
		
	}
</script>

<style scoped lang="scss">
	canvas {
		width: 1080px;
		height: 1620px; 
		position: absolute; 
		left: -1080px;
		top: -1620px;
	}
</style>
